import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
import { lazy, Suspense } from 'react'
import CommonLoginPage from './Login/Pages/CommonLoginPage'
import './App.css'

const Layout = lazy(() => import('./pages/Layout'))
const Overview = lazy(() => import('./pages/Overview'))
const HotelList = lazy(() => import('./pages/HotelList'))

const App = () => {
  return (
    <BrowserRouter>
      <div className="App">
        <Suspense
          fallback={
            <div
              style={{
                textAlign: 'center',
                marginTop: 200,
                color: 'red',
              }}>
              loading...
            </div>
          }>
          <Routes>
            <Route
              path="/login"
              element={
                <CommonLoginPage
                  logo="华飞智能酒店PMS"
                  footer={
                    <div>
                      <a href="http://www.huafeiiot.com">
                        华飞智能酒店PMS - 使用说明
                      </a>
                    </div>
                  }
                  scanLogin={{
                    code: 'http://www.huafeiiot.com',
                    tip: <div>使用微信扫码登录</div>,
                  }}
                  accountLogin={{
                    onLogin: (account: string, password: string) => {
                      console.log(account)
                    },
                  }}
                  phoneNumberLogin={{
                    codeFetchWaitTime: 60,
                    onGetCode: (phoneNumber: string) => {
                      console.log('已获取短信验证码')
                    },
                    onLogin: (phoneNumber: string, code: string) => {
                      console.log('登录成功!')
                    },
                  }}
                />
              }
            />
            <Route path="/main" element={<Layout />}>
              <Route index element={<Overview />}></Route>
              <Route path="hotelList/*" element={<HotelList />}></Route>
            </Route>
            <Route path="/" element={<Navigate to="/login" />}></Route>
          </Routes>
        </Suspense>
      </div>
    </BrowserRouter>
  )
}

export default App
